<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://cdn.bootcss.com/jquery/3.1.0/jquery.min.js"></script>
</head>
<body>
<!--<select id="mainselect" name="mainselect" style="width:120px;"></select>-->
<select id="mainselect" name="mainselect" style="width:auto;"></select>
<select id="midselect" name="midselect" style="width:220px;"></select>
<select id="backselect" name="backselect" style="width:160px;"></select>
<script type="text/javascript">
var threeSelectData={

    "选择频道":{
        val:"0",
        items:{
            "二级子菜单":{
                val:"0",
                items:{
                    "三级子菜单":"0"
                }
            }
        }
    },
    "web":{
        val:"web",
        items:{
            "192.168.1.1":"192.168.1.1",
            "192.168.1.2":{val:"192.168.1.2",items:{}},
        }
    },
    "mysql":{
        val:"mysql",
        items:{
            "192.168.1.1":{val:"192.168.1.1",items:{}},
            "192.168.1.2":{val:"192.168.1.2",items:{}},
        }
    },

    "jquery特效":{
        val:"jquery",
        items:{
            "jquery图片特效":{
                val:"jqpic",
                items:{
                    "jquery图片切换":"jqpic-01",
                    "jquery幻灯片":"jqpic-02",
                    "jquery图片滚动":"jqpic-03",
                    "jquery图片放大":"jqpic-04",
                    "jquery广告":"jqpic-05",
                    "jquery图片其它":"jqpic-06"
                }
            },

            "jquery导航菜单":{
                val:"jqnav",
                items:{
                    "jquery动画菜单":"jqnav-01",
                    "jquery下拉菜单":"jqnav-02",
                    "jquery手风琴菜单":"jqnav-03",
                    "jquery导航其它":"jqnav-04"
                }
            },

            "jquery选项卡特效":{
                val:"jqtab",
                items:{
                    "jquery选项卡切换":"jqtab-01",
                    "jquery滑动选项卡":"jqtab-02"
                }
            },
        }
    }



};

var defaults = {
    s1:'mainselect',
    s2:'midselect',
    s3:'backselect'
};

$(function(){
    threeSelect(defaults);
});

function threeSelect(config){
    var $s1=$("#"+config.s1);
    var $s2=$("#"+config.s2);
    var $s3=$("#"+config.s3);
    var v1=config.v1?config.v1:null;
    var v2=config.v2?config.v2:null;
    var v3=config.v3?config.v3:null;
    $.each(threeSelectData,function(k,v){
        appendOptionTo($s1,k,v.val,v1);
    });

    $s1.change(function(){
        $s2.html("");
        $s3.html("");
        if(this.selectedIndex==-1)
        return;

        var s1_curr_val = this.options[this.selectedIndex].value;

        $.each(threeSelectData,function(k,v){
            if(s1_curr_val==v.val){
                if(v.items){
                    $.each(v.items,function(k,v){
                        appendOptionTo($s2,k,v.val,v2);
                    });
                }
            }
        });

        if($s2[0].options.length==0){
            appendOptionTo($s2,"...","",v2);
        }

        $s2.change();

    }).change();

    $s2.change(function(){
        $s3.html("");
        var s1_curr_val = $s1[0].options[$s1[0].selectedIndex].value;
        if(this.selectedIndex==-1)
        return;

        var s2_curr_val = this.options[this.selectedIndex].value;

        $.each(threeSelectData,function(k,v){
            if(s1_curr_val==v.val){
                if(v.items){
                    $.each(v.items,function(k,v){
                        if(s2_curr_val==v.val){
                            $.each(v.items,function(k,v){
                                appendOptionTo($s3.show(),k,v,v3);
                            });
                        }
                    });

                    if($s3[0].options.length==0){
                        appendOptionTo($s3.hide(),"...","",v3);
                    }
                }
            }
        });

    }).change();

    function appendOptionTo($o,k,v,d){

        var $opt=$("<option>").text(k).val(v);

        if(v==d){
            $opt.attr("selected", "selected")
        }
        $opt.appendTo($o);
    }

}
</script>

</body>
</html>